<template>
  <VPage class="app-container">
    <VTable v-if="isRefresh" ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <template v-if="activeName != 1">
          <el-input class="w-40" v-model="form.batch_no" placeholder="批次号"></el-input>
        </template>
        <el-input class="w-40" v-model="form.p_batch_no" placeholder="关联批次号"></el-input>
        <el-input class="w-40" v-model="form.order_no" placeholder="相关单号"></el-input>
        <el-select class="selectClass" v-model="form.op_type" style="max-width: 150px" placeholder="单据类型">
          <el-option v-for="item in options['inv.orderType']?.[0].opTypeMap" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <SelectWarehouse v-model="form.warehouse_id" placeholder="仓库"></SelectWarehouse>
        <VGroup>
          <div class="group-label">创建时间</div>
          <el-date-picker v-model="form.create_time" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()" style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <div class="w-full">
          <el-tabs v-model="activeName" class="pl-4 pr-4" @tab-change="handleChange">
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in tabList"
              :key="index"></el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </VTable>
  </VPage>
</template>
<script setup name="ConstCost-record" lang="jsx">
import { ElMessage, ElMessageBox } from 'element-plus'
import { nextTick, ref, reactive, toRefs } from 'vue'
import SelectWarehouse from '@/components/SelectWarehouse'
import { getListCostIn, getListCostOut, getListCostNow } from './api/index'
import { getEnums } from '@/api/public'
import { useRouter, useRoute } from 'vue-router';
const route = useRoute()
const router = useRouter()


const tabList = [
  {
    label: '入库汇总表',
    name: 0
  },
  {
    label: '出库汇总表',
    name: 1
  },
  {
    label: '剩余成本表',
    name: 2
  },
]

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 60 },
  formConfig: {
    data: {
    }
  },
  columns: [],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const requestFun = activeName.value === 0 ? getListCostIn : activeName.value === 1 ? getListCostOut : getListCostNow
        const res = await requestFun({ ...form, ...page })
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})


const initColumns = (type) => {
  if (type == 0) {
    tableOptins.columns = [
      // { type: 'seq', title: '序号', width: "80" },
      {
        field: 'batch_no', title: '批次号', width: 200,
      },
      {
        field: 'owner_id', title: '货主编号', width: 120
      },
      {
        field: 'owner_name', title: '货主名称', width: 140
      },
      {
        field: 'order_no', title: '相关单号', width: 180
      },
      {
        field: 'op_type_name', title: '单据类型', width: 140
      },
      {
        field: 'warehouse_name', title: '仓库', width: 140
      },
      {
        field: 'sku', title: 'SKU', width: 160
      },
      {
        field: 'sku_cn_title', title: '产品名称', width: 160
      },
      {
        field: 'in_num', title: '数量', width: 100
      },
      {
        field: 'purchase_cost', title: '采购成本', width: 100
      },
      {
        field: 'purchase_freight', title: '采购运费', width: 100
      },
      {
        field: 'material_cost', title: '物料成本', width: 100
      },
      {
        field: 'first_freight', title: '头程运费', width: 100
      },
      {
        field: 'storage_charge', title: '仓储费', width: 100
      },
      {
        field: 'return_charge', title: '退件费用', width: 100
      },
      {
        field: 'tax', title: '税费', width: 100
      },
      {
        field: 'create_time', title: '创建时间', width: 180
      },
      {
        field: 'p_batch_no', title: '关联批次号', width: 180
      }
    ]
  } else if (type == 1) {
    tableOptins.columns = [
      { type: 'seq', title: '序号', width: "80" },
      {
        field: 'owner_id', title: '货主编号', width: 120
      },
      {
        field: 'owner_name', title: '货主名称', width: 140
      },
      {
        field: 'order_no', title: '相关单号', width: 180
      },
      {
        field: 'op_type_name', title: '单据类型', width: 120
      },
      {
        field: 'warehouse_name', title: '仓库', width: 140
      },
      {
        field: 'sku', title: 'SKU', width: 160
      },
      {
        field: 'sku_cn_title', title: '产品名称', width: 160
      },
      {
        field: 'num', title: '数量', width: 100
      },
      {
        field: 'purchase_cost', title: '采购成本', width: 100
      },
      {
        field: 'purchase_freight', title: '采购运费', width: 100
      },
      {
        field: 'material_cost', title: '物料成本', width: 100
      },
      {
        field: 'first_freight', title: '头程运费', width: 180
      },
      {
        field: 'storage_charge', title: '仓储费', width: 100
      },
      {
        field: 'return_charge', title: '退件费用', width: 100
      },
      {
        field: 'tax', title: '税费', width: 100
      },
      {
        field: 'create_time', title: '创建时间', width: 180
      },
      {
        field: 'p_batch_no', title: '关联批次号', width: 180
      }
    ]
  } else if (type == 2) {
    tableOptins.columns = [
      { type: 'seq', title: '序号', width: "80" },
      {
        field: 'batch_no', title: '批次号', width: 200,
      },
      {
        field: 'owner_id', title: '货主编号', width: 120
      },
      {
        field: 'owner_name', title: '货主名称', width: 140
      },
      {
        field: 'order_no', title: '相关单号', width: 180
      },
      {
        field: 'op_type_name', title: '单据类型', width: 120
      },
      {
        field: 'warehouse_name', title: '仓库', width: 140
      },
      {
        field: 'sku', title: 'SKU', width: 160
      },
      {
        field: 'sku_cn_title', title: '产品名称', width: 160
      },
      {
        field: 'num', title: '数量', width: 100
      },
      {
        field: 'purchase_cost', title: '采购成本', width: 100
      },
      {
        field: 'purchase_freight', title: '采购运费', width: 100
      },
      {
        field: 'material_cost', title: '物料成本', width: 100
      },
      {
        field: 'first_freight', title: '头程运费', width: 180
      },
      {
        field: 'storage_charge', title: '仓储费', width: 100
      },
      {
        field: 'return_charge', title: '退件费用', width: 100
      },
      {
        field: 'tax', title: '税费', width: 100
      },
      {
        field: 'last_stock_age', title: '延续库龄', width: 100
      },
      {
        field: 'stock_age', title: '库龄', width: 100
      },
      {
        field: 'create_time', title: '创建时间', width: 180
      },
      {
        field: 'update_time', title: '最后更新时间', width: 180
      },
      {
        field: 'p_batch_no', title: '关联批次号', width: 180
      }
    ]
  }
}
initColumns(0)

const handleChange = (val) => {
  initColumns(activeName.value)
  isRefresh.value = false
  nextTick(() => {
    isRefresh.value = true
  })
}


const data = reactive({
  options: [],
  activeName: 0,
  isRefresh: true
})
const { options, activeName, isRefresh } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "inv.orderType","cost.CostSummary"
    ]
  }).then(res => {
    options.value = res.data
  })
}
fetchOption()

const logRef = ref()
const handleLog = (row) => {
  // wms/statement/inventory-balance/ware-log
  // wms/statement/inventory-balance/location-log
  const path = activeName.value == 0 ? '/statement/inventory-balance/ware-log' : '/statement/inventory-balance/location-log'
  router.push({
    path,
    query: {
      sku: row.sku,
      warehouse_id: row.warehouse_id
    }
  })
}

</script>